<template>
  <div class="detail">
    <el-row :gutter="20">
      <el-col :span="16">
        <!--资源信息-->
        <div class="detail-box">
          <!--详情页头部介绍-->
          <div class="detail-box-header">
            <div class="detail_header_bg">
              <div class="detail_header_bg_bg"></div>
              <img :src="drama.cover | filterImg" alt="" class="blur">
            </div>
            <div class="txt-box">
              <h1 class="title" v-text="drama.title">辉夜大小姐想让我告白~天才们的恋爱头脑战~</h1>
              <p class="oth-title" v-text="drama.othTitle">かぐや様は告らせたい～天才たちの恋愛頭脳戦～</p>
            </div>
          </div>
          <!--详情页简介-->
          <div class="detail-box-body">
            <el-row :gutter="20" class="detail-type">
              <el-col :span="8"><p>类目：{{ drama.category | categoryFilter }}</p></el-col>
              <el-col :span="8"><p>类型：0</p></el-col>
            </el-row>
            <el-row :gutter="20" class="detail-type">
              <el-col :span="8"><p>地区：{{ drama.area }}</p></el-col>
              <el-col :span="8"><p>时间：{{ drama.publishTime | dateFilter }}</p></el-col>
            </el-row>
            <div class="detail-introduce">
              <p>
                简介：{{ drama.description }}
              </p>
            </div>
            <div class="state-btns">
              <div class="btn-state unfollow" @click="purseDrama">
                <img src="../../assets/image/icon/icon_follow.png" alt="">
                <span v-if="watched===undefined || watched">未追</span>
                <span v-if="watched === false">已追剧</span>
              </div>
              <div class="btn-state" @click="watchedDrama">
                <img src="../../assets/image/icon/icon_unwatch.png" alt="">
                <span v-if="watched===undefined || !watched">未看完</span>
                <span v-if="watched">已看完</span>
              </div>
              <div class="btn-state" @click="showCatelogDialog">
                <img src="../../assets/image/icon/icon_collect_highlight.png" alt="">
                <span>收藏至清单</span>
              </div>
              <el-dialog
                  custom-class="catelogDialog"
                  title="选择要加入的清单"
                  :visible.sync="catelogDialog"
                  width="30%">
                <p class="catelog-item" v-for="item in userCatelogs" @click="addCatelogDrama(item.id)"><i
                    class="file-icon el-icon-files"></i>{{ item.title }}</p>
                <span slot="footer" class="dialog-footer">
                  <el-row :gutter="10" align="bottom">
                    <el-col :span="18">
                      <el-input v-model="catelogName" placeholder="请输入要新增的清单名"></el-input>
                    </el-col>
                    <el-col :span="0">
<!--                      <el-button v-show="addCatelogVisible" size="small" type="primary" icon="el-icon-check" plain></el-button>-->
                    </el-col>
                    <el-col :span="6">
                      <el-button type="primary" size="small" icon="el-icon-plus" @click="addCatelog">新增清单</el-button>
                    </el-col>
                  </el-row>
                </span>
              </el-dialog>
            </div>
          </div>
          <!--详情页封面-->
          <div class="detail-img">
            <div class="detail-img-img">
              <el-image :src="drama.cover | filterImg"
                        :preview-src-list="[this.$getImg(drama.cover)]"></el-image>
            </div>
          </div>
        </div>
        <!--分集信息-->
        <div class="compilation-box">
          <div class="tit">分集列表</div>
          <div class="content">
            <el-button @click="getEpisodeInfo(item.id)" class="item" v-for="item in episodes" :key="item.id"
                       v-text="item.name"></el-button>
            <el-empty v-if="!episodes || episodes.length===0" description="暂无分集信息"></el-empty>
          </div>
        </div>
        <div class="comment-input">
          <div class="tit">追剧是喜欢,评论才是真爱:</div>
          <el-input
              type="textarea"
              class="content"
              :rows="4"
              placeholder="请开始你的表演..."
              maxlength="1000"
              :autosize="{minRows:4}"
              show-word-limit
              resize="none"
              v-model="commentContent">
          </el-input>
          <div class="commit">
            <el-button class="" type="primary" style="float: right" @click="sendComment()">评论</el-button>
          </div>
          <!--          <div style="clear: both"></div>-->
        </div>
        <div class="comment-box">
          <div class="tit">
            评论区
          </div>
          <div class="content">
            <div class="post">

            </div>
            <comment-item v-for="item in comments" :key="item.id" :comment="item" ref="rootComment"
                          :reply-dialog-visible="true"
                          @pushComment="sendReplys"
                          @closeReplyInput="closeReply"
                          @openReplyDialog="openReplyDialog"></comment-item>
            <el-empty v-if="comments.length === 0" description="评论区空空如也…"></el-empty>
          </div>
        </div>
        <el-dialog
            custom-class="reply-dialog"
            top="8vh"
            title="查看评论"
            :visible.sync="replyDialogVisible">
          <div class="replyList">
            <div class="commentTop">
              <comment-item ref="replyTop" :reply-dialog-visible="false" @closeReplyInput="closeInnerReply"
                            @pushComment="sendComment"
                            :comment="rootReply"></comment-item>
            </div>
            <div class="reply-body">
              <comment-item ref="replyList" :reply-dialog-visible="false"
                            @pushComment="sendComment"
                            @closeReplyInput="closeDialogReplyInput"
                            v-for="item in replys" :comment="item"
                            :key="item.id"></comment-item>
            </div>

          </div>
        </el-dialog>
      </el-col>
      <el-col :span="8">
        <hot-show :dramas="popularDramas"></hot-show>
      </el-col>
    </el-row>
    <!-- Table -->

    <el-dialog title="分集信息" :visible.sync="episodeDialogVisible">
      <el-table v-loading="loadingEpisode" :data="episodeInfo" row-class-name="episodeInfo" @row-click="toTarget">
        <el-table-column property="name" label="名称" width="250"></el-table-column>
        <el-table-column property="description" label="来源"></el-table-column>
        <!--        <el-table-column property="src" label="跳转" width="250"></el-table-column>-->
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import HotShow from "../../components/HotShow";
import CommentItem from "../../components/CommentItem";
import {detail} from "../../api/drama";
import {episodeSrcByEpisodeId} from "../../api/episodeSrc";
import {commentList, replyCommentList, sendComment} from "../../api/drama-comment";
import {cancelPursue, pursueCommit, pursueDrama} from "../../api/pursue";
import {catelogByUser, createDefaultCatelog} from "../../api/catelog";
import {addCatelogDramaItem} from "../../api/catelog-drama-items";

export default {
  name: "Detail",
  components: {CommentItem, HotShow},
  data() {
    return {
      drama: Object,
      purse: undefined,
      watched: undefined,
      watchedId: undefined,
      catelogDialog: false,
      loadingEpisode: true,
      addCatelogVisible: false,
      catelogName: '',
      episodeDialogVisible: false,
      replyDialogVisible: false,
      commentContent: '',
      rootReply: Object,
      replys: [],
      popularDramas: [],
      episodeInfo: [],
      episodes: [],
      comments: [],
      userCatelogs: []
    }
  },
  created() {
    this.getDetail()
  },
  methods: {
    purseDrama() {
      if (this.watched === undefined || this.watched) {
        this.watched = false
        //TODO:追剧操作(插入或更新)
        this.pursueDramaCommit()
        return
      }
      if (this.watched === false) {
        this.watched = undefined
        //TODO:取消追剧(删除)
        this.cancelPursue()
      }
    },
    watchedDrama() {
      if (this.watched === undefined || !this.watched) {
        this.watched = true
        //TODO:已看完操作(插入或更新)
        this.pursueDramaCommit()
        return
      }
      if (this.watched) {
        this.watched = undefined
        // TODO:取消已看完(删除)
        this.cancelPursue()
      }
    },
    pursueDramaCommit() {
      console.log('shit')
      if (!this.$store.getters.user) {
        this.$message({
          type: 'warning',
          message: '请先登入',
          duration: 2000
        })
        this.$router.push('/login')
      }
      let data = {
        userId: this.$store.getters.user.id,
        dramaId: this.$route.params.id,
        watched: this.watched
      }
      if (this.watchedId) {
        data["id"] = this.watchedId
      }
      pursueCommit(data).then(res => {
        const {data} = res
        this.$message.success(data.message)
      })
    },
    cancelPursue() {
      cancelPursue(this.watchedId).then(res => {
        const {data} = res
        this.$message.success(data.message)
      })
    },
    showCatelogDialog() {
      this.catelogDialog = true
      this.getUserCatelog()
    },
    getUserCatelog() {
      catelogByUser(this.user.id).then(res => {
        const {data} = res.data;
        this.userCatelogs = data
      }).catch(err => console.log(err))
    },
    async getDetail() {
      let dramaId = this.$route.params.id;
      await detail(dramaId).then(res => {
        let data = res.data.data;
        this.drama = data.drama;
        this.comments = data.comments
        this.episodes = data.episodes;
        this.popularDramas = data.popular
        if (this.user) {
          this.getPursueDrama()
        }
      }).catch(err => console.log(err))
    },
    getPursueDrama() {
      pursueDrama({userId: this.user.id, dramaId: this.drama.id}).then(res => {
        this.watched = res.data.data.watched
        this.watchedId = res.data.data.id
      })
    },
    getComments() {
      let id = this.$route.params.id;
      commentList(id).then(res => {
        this.comments = res.data.data
      })
    },
    getEpisodeInfo(episodeId) {
      this.episodeDialogVisible = true
      this.loadingEpisode = true
      setTimeout(() => {
        episodeSrcByEpisodeId(episodeId).then(res => {
          this.episodeInfo = res.data.data
          this.loadingEpisode = false
        })
      }, 300)
    },
    toTarget(row, column, event) {
      window.open(row.src, '_blank')
    },
    openReplyDialog(rootComment) {
      this.replyDialogVisible = true
      this.rootReply = rootComment
      replyCommentList(this.rootReply.id).then(res => {
        this.replys = res.data.data;
      }).catch(err => console.log(err))
    },
    closeReply() {
      let replys = this.$refs.rootComment;
      replys.forEach((item, i) => {
        item.$data.replyInputVisible = false
        item.$data.replyContent = ''
      })
      this.$nextTick()
    },
    closeInnerReply() {
      let replyList = this.$refs.replyList;
      if (replyList) {
        replyList.forEach((item, i) => {
          item.$data.replyInputVisible = false;
          item.$data.replyContent = ''
        })
        this.$nextTick()
      }
    },
    closeDialogReplyInput() {
      let replyList = this.$refs.replyList;
      let replyTop = this.$refs.replyTop;
      replyTop.$data.replyInputVisible = false;
      replyList.forEach((item, i) => {
        item.$data.replyInputVisible = false;
      })
      this.$nextTick()
    },
    getReplysList() {
      if (this.rootReply) {
        replyCommentList(this.rootReply.id).then(res => {
          this.replys = res.data.data;
        }).catch(err => console.log(err))
      }
    },
    sendComment(reply) {
      let loginUser = this.$store.getters.user;
      if (!loginUser) {
        this.$message.warning('请先登入')
        this.$router.push('/login')
        return;
      }
      let commentPost = {}
      if (reply) {
        commentPost = reply
      } else {
        if (this.commentContent === '') {
          this.$message.error("评论内容不能为空!!!")
          return;
        }
        commentPost = {
          dramaId: this.$route.params.id,
          userId: this.$store.getters.user.id,
          content: this.commentContent
        }
      }
      sendComment(commentPost).then(res => {
        this.$message.success(res.data.message)
        this.commentContent = ''
        this.getReplysList()
        this.getComments()
      }).catch(err => {
        console.log(err)
      })
    },
    sendReplys(reply) {
      let comment = {}
      if (reply) {
        comment = reply
      } else {
        comment = {
          dramaId: this.$route.params.id,
          userId: this.$store.getters.user.id,
          content: this.commentContent
        }
      }
      sendComment(comment).then(res => {
        this.$message.success(res.data.message)
        // this.openReplyDialog(this.rootReply)
      }).catch(err => {
        console.log(err)
      })
    },
    clearCommentInfo() {
      this.rootReply = undefined
    },
    addCatelog() {
      //TODO:提交新增清单请求
      let catelog = {
        userId: this.user.id,
        title: this.catelogName
      }
      createDefaultCatelog(catelog).then(res => {
        this.getUserCatelog()
        this.catelogName = ''
        this.$message.success(res.data.message)
      }).catch(err => console.log(err))
    },
    addCatelogDrama(catelogId) {
      let catelogDrama = {
        dramaId: this.drama.id,
        catelogId: catelogId
      }
      //TODO:向清单添加剧目
      addCatelogDramaItem(catelogDrama).then(res => {
        const {data} = res;
        if (data.data === true) {
          this.$message.success(data.message)
        } else {
          this.$message.warning(data.message)
        }
      }).catch(err => console.log(err))
    }
  },
  computed: {
    user() {
      return this.$store.getters.user
    }
  }
}
</script>

<style scoped>
p {
  margin: 0;
  padding: 0;
}

h1 {
  margin: 0;
  font-weight: normal;
}

.detail {
  min-height: 50vh;
}

.detail-box {
  width: 100%;
  border-radius: 4px;
  background-color: #FFFFFF;
  min-height: 400px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
}

.detail-box-header {
  position: relative;
  padding-left: 220px;
  background: url("../../assets/image/tiaomu.png");
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.detail_header_bg {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background-color: #fff;
  overflow: hidden;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.detail_header_bg_bg {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background: black;
  opacity: 0.1;
  z-index: 0;
}

.detail_header_bg {
  width: 100%;
  height: auto;
  opacity: 1;
}

.blur {
  filter: blur(15px);
}

img {
  vertical-align: middle;
}

.detail-box-header img {
  width: 100%;
  height: auto;
  opacity: 1;
}

.txt-box {
  min-height: 135px;
  position: relative;
  z-index: 1;
  padding-top: 80px;
  padding-bottom: 15px;
  box-sizing: border-box;
}

.txt-box h1 {
  margin: 0;
}

.detail-box-header .txt-box .title {
  font-size: 24px;
  line-height: 30px;
  color: #fff;
  text-shadow: 0px 2px 10px rgb(0 0 0 / 80%);
  width: 560px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detail-box-header .txt-box .oth-title {
  font-size: 18px;
  line-height: 30px;
  color: #fff;
  width: 560px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0px 2px 10px rgb(0 0 0 / 80%);
}

.detail-box-body {
  padding: 20px 5px 20px 220px;
}

.detail-box-body .detail-type {
  margin-bottom: 8px;
}

.detail-box-body .detail-type p {
  font-size: 13px;
  color: #333;
}

.detail-box-body .detail-introduce p {
  font-size: 15px;
  color: #333;
}

.detail-img {
  position: absolute;
  top: 60px;
  left: 30px;
  width: 168px;
  height: 224px;
  padding: 3px;
  background: #fff;
  box-shadow: 0 1px 2px rgb(0 0 0 / 20%);
}

.detail-img-img {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.state-btns {
  margin-top: 20px;
}

.state-btns >>> .el-button {
  font-size: 14px;
}

.state-btns >>> .el-button .el-icon-star-on {
  color: yellow;
  font-size: 14px;
  height: 100%;
}

.state-btns .btn-state {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  box-shadow: 0 1px 6px 0 rgb(0 0 0 / 20%);
  cursor: pointer;
  margin-right: 15px;
}

.state-btns .btn-state img {
  width: 22px;
  height: 22px;
}


.state-btns .btn-state span {
  font-size: 13px;
  color: #333333;
  display: block;
  margin: 0 5px;
}

.state-btns .btn-state.unfollow {
  background-color: #ff6160;
}

.unfollow span {
  color: #FFFFFF !important;
}

.compilation-box, .comment-box {
  background-color: #FFFFFF;
  margin: 10px 0;
  border-radius: 5px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
}

.compilation-box .tit, .comment-box .tit {
  font-size: 15px;
  font-weight: bold;
  padding: 8px 16px;
  border-bottom: 1px dotted #DEDEDE;
}

.comment-input {
  margin-top: 10px;
  padding: 25px 15px;
  background-color: white;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)

}

.comment-input .tit {
  color: #ccc;
  margin-bottom: 15px;
  cursor: default;
}

.comment-input .content {
  font-size: 15px;
  color: #666;
}

.comment-input .commit {
  margin-top: 15px;
}

.comment-input .commit::after {
  content: '';
  display: block;
  clear: both;
}

.compilation-box .content {
  padding: 16px;
}

.compilation-box .content .item {
  min-width: 40px;
  padding: 0 5px;
  height: 40px;
  box-sizing: border-box;
  background-color: #ececec;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /*margin-right: 15px;*/
  /*margin-top: 8px;*/
  cursor: pointer;
}

.compilation-box .content .item:hover {
  color: #ff8296;
  transition: .2s;
}

.compilation-box >>> .el-empty {
  padding: 20px 0;
}

.compilation-box >>> .el-empty .el-empty__image {
  width: 60px;
}

.comment-box .content {
}

.detail >>> .episodeInfo {
  cursor: pointer !important;
}

.replyList .commentTop {
  border-bottom: 10px solid #f0f1f5;
}

.replyList {
  position: relative;
}


>>> .reply-dialog .el-dialog__body {

  padding: 0 !important;
  height: 480px !important;
  overflow-y: scroll !important;
}

.reply-dialog .reply-commit {
  padding: 15px;
  background-color: white;
  position: fixed;
  bottom: 0;
  width: 100%;
  margin-bottom: 100px;
  box-sizing: border-box;
}

p.catelog-item {
  padding: 15px 5px;
  /*color: #409EFF;*/

}

.catelog-item:hover {
  cursor: pointer;
  background-color: #ececec;
  /*color: #5cb6ff;*/
}

>>> .catelogDialog .el-input__inner {
  height: 34px !important;
  line-height: 34px !important;
}

.catelog-item .file-icon {
  color: #ffcf4f;
  margin-right: 10px;
}
</style>
